<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序员简历 - 紫色主题</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-indigo: #4B0082;
            --indigo-light: #6A0DAD;
            --indigo-dark: #330066;
            --indigo-pale: #E6E6FA;
            --text-dark: #333;
            --text-light: #777;
            --background: #F9F9F9;
            --white: #FFFFFF;
            --shadow: 0 5px 15px rgba(75, 0, 130, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--background);
            color: var(--text-dark);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .resume {
            display: flex;
            flex-direction: column;
            background: var(--white);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        @media (min-width: 768px) {
            .resume {
                flex-direction: row;
                min-height: 100vh;
            }
        }

        /* 左侧边栏样式 */
        .sidebar {
            background: linear-gradient(to bottom, var(--primary-indigo), var(--indigo-dark));
            color: var(--white);
            padding: 30px;
            flex: 1;
        }

        .profile {
            text-align: center;
            margin-bottom: 30px;
        }

        .profile-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 5px solid rgba(255, 255, 255, 0.2);
            margin: 0 auto 20px;
            background-color: var(--indigo-light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 60px;
        }

        .profile h1 {
            font-size: 28px;
            margin-bottom: 5px;
        }

        .profile p {
            color: var(--indigo-pale);
            font-size: 18px;
        }

        .contact-info,
        .skills {
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 20px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.2);
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 50px;
            height: 2px;
            background: var(--indigo-pale);
        }

        .contact-list {
            list-style: none;
        }

        .contact-list li {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .contact-list i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

        .skill-item {
            margin-bottom: 15px;
        }

        .skill-name {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .skill-bar {
            height: 8px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
        }

        .skill-level {
            height: 100%;
            background: var(--indigo-pale);
            border-radius: 4px;
        }

        /* 主要内容区域样式 */
        .main-content {
            flex: 2;
            padding: 30px;
        }

        .about {
            margin-bottom: 30px;
        }

        .about p {
            margin-bottom: 15px;
            color: var(--text-light);
        }

        .experience,
        .education {
            margin-bottom: 30px;
        }

        .timeline {
            position: relative;
            padding-left: 20px;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 5px;
            height: 100%;
            width: 2px;
            background: var(--indigo-pale);
        }

        .timeline-item {
            margin-bottom: 20px;
            position: relative;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -24px;
            top: 5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--primary-indigo);
            border: 2px solid var(--indigo-pale);
        }

        .timeline-date {
            font-size: 14px;
            color: var(--primary-indigo);
            margin-bottom: 5px;
            font-weight: 600;
        }

        .timeline-title {
            font-size: 18px;
            margin-bottom: 5px;
            color: var(--indigo-dark);
        }

        .timeline-company {
            font-style: italic;
            color: var(--text-light);
            margin-bottom: 10px;
        }

        .timeline-description {
            color: var(--text-light);
        }

        .projects {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        @media (min-width: 576px) {
            .projects {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .project-card {
            background: var(--indigo-pale);
            border-radius: 8px;
            padding: 20px;
            transition: transform 0.3s ease;
        }

        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }

        .project-card h4 {
            color: var(--primary-indigo);
            margin-bottom: 10px;
            font-size: 18px;
        }

        .project-card p {
            color: var(--text-light);
            font-size: 14px;
        }

        .tag {
            display: inline-block;
            background: var(--primary-indigo);
            color: var(--white);
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-top: 10px;
            margin-right: 5px;
        }

        footer {
            text-align: center;
            padding: 20px;
            color: var(--text-light);
            font-size: 14px;
            background: var(--white);
            border-top: 1px solid var(--indigo-pale);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="resume">
            <!-- 左侧边栏 -->
            <div class="sidebar">
                <div class="profile">
                    <div class="profile-img">
                        <i class="fas fa-user"></i>
                    </div>
                    <h1>张三</h1>
                    <p>全栈开发工程师</p>
                </div>

                <div class="contact-info">
                    <h2 class="section-title">联系方式</h2>
                    <ul class="contact-list">
                        <li><i class="fas fa-phone"></i> +86 138 1234 5678</li>
                        <li><i class="fas fa-envelope"></i> zhangsan@email.com</li>
                        <li><i class="fas fa-map-marker-alt"></i> 北京市海淀区</li>
                        <li><i class="fab fa-github"></i> github.com/zhangsan</li>
                        <li><i class="fab fa-linkedin"></i> linkedin.com/in/zhangsan</li>
                    </ul>
                </div>

                <div class="skills">
                    <h2 class="section-title">技术技能</h2>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>JavaScript/TypeScript</span>
                            <span>90%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 90%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>React/Vue</span>
                            <span>85%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 85%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>Node.js</span>
                            <span>80%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 80%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>Python</span>
                            <span>75%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 75%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>数据库设计</span>
                            <span>85%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 85%;"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧主要内容 -->
            <div class="main-content">
                <section class="about">
                    <h2 class="section-title" style="color: var(--primary-indigo);">关于我</h2>
                    <p> 我是一位充满激情的全栈开发人员，在构建可扩展的Web应用程序方面拥有超过5年的经验。我精通全栈JavaScript技术（React.js、Vue.js、Node.js、Express.js）。
                    </p>
                    <p>拥有北京大学计算机科学学士学位，具备扎实的工程专业能力。热衷于学习软件开发领域的新技术和最佳实践。</p>
                </section>

                <section class="experience">
                    <h2 class="section-title" style="color: var(--primary-indigo);">工作经历</h2>
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-date">2020 - 至今</div>
                            <h3 class="timeline-title">高级全栈工程师</h3>
                            <div class="timeline-company">ABC科技有限公司</div>
                            <p class="timeline-description">负责公司核心产品的前后端开发，主导了从单体架构到微服务的重构，提高了系统可扩展性和性能。</p>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-date">2018 - 2020</div>
                            <h3 class="timeline-title">前端开发工程师</h3>
                            <div class="timeline-company">XYZ互联网公司</div>
                            <p class="timeline-description">负责公司电商平台的前端开发，使用React技术栈实现了响应式用户界面，提升了用户体验和转化率。</p>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-date">2016 - 2018</div>
                            <h3 class="timeline-title">软件开发工程师</h3>
                            <div class="timeline-company">123软件公司</div>
                            <p class="timeline-description">参与企业级管理系统的开发，使用Java和Spring框架，积累了后端开发和数据库设计的经验。</p>
                        </div>
                    </div>
                </section>

                <section class="education">
                    <h2 class="section-title" style="color: var(--primary-indigo);">教育背景</h2>
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-date">2012 - 2016</div>
                            <h3 class="timeline-title">计算机科学与技术学士</h3>
                            <div class="timeline-company">北京大学</div>
                            <p class="timeline-description">主修软件工程、算法设计、数据库系统等课程，GPA 3.8/4.0，获得校级优秀毕业生称号。</p>
                        </div>
                    </div>
                </section>

                <section class="projects">
                    <h2 class="section-title" style="color: var(--primary-indigo);">项目经验</h2>
                    <div class="project-card">
                        <h4>企业资源管理系统</h4>
                        <p>设计并开发了一个全面的企业资源管理系统，整合了人力资源、财务和项目管理模块。</p>
                        <span class="tag">React</span>
                        <span class="tag">Node.js</span>
                        <span class="tag">MongoDB</span>
                    </div>
                    <div class="project-card">
                        <h4>电子商务平台</h4>
                        <p>领导开发团队构建了一个高性能的电子商务平台，支持每日超过10万笔交易。</p>
                        <span class="tag">Vue.js</span>
                        <span class="tag">Express</span>
                        <span class="tag">MySQL</span>
                    </div>
                    <div class="project-card">
                        <h4>移动健康应用</h4>
                        <p>开发了一款健康追踪移动应用，具有数据可视化和个性化推荐功能。</p>
                        <span class="tag">React Native</span>
                        <span class="tag">Python</span>
                        <span class="tag">Firebase</span>
                    </div>
                    <div class="project-card">
                        <h4>实时协作工具</h4>
                        <p>创建了一个实时协作工具，支持多用户同时编辑文档和项目管理。</p>
                        <span class="tag">Socket.io</span>
                        <span class="tag">MERN Stack</span>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <footer>
        <p>最后更新: 2023年10月 | 本简历使用HTML和CSS制作</p>
    </footer>
</body>

</html>